<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="91.swiper.min.css">
    <link rel="stylesheet" href="91.swper使用.css">
</head>

<body>
    <!-- 第一个 -->
    <div class="q">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="向下标图片.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="紫色图片.jpg" alt="">
                </div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->

            <!-- 小圆点样式 -->
            <!-- <div class="swiper-pagination"></div> -->

            <!-- 左右箭头样式 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

    <!-- 第二个 -->
    <div class="w">
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <script src="91.swiper.min.js"></script>
    <!-- 第一个 -->
    <script>
        (function () {
            var swiper = new Swiper('.swiper-container', {
                // 能够显示的个数
                slidesPerView: 3,

                // 每个slide之间的距离
                spaceBetween: 30,

                centeredSlides: true,
                loop: true,

                //   小圆点样式
                //   pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                //   },

                // 左右箭头样式
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        })();
    </script>

    <!-- 第二个 -->
    <script>
        (function () {
            // 如果有多个轮播图,有多个相同的.mySwiper那就要修改别的
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 2.2,
                spaceBetween: 30,
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
            });
        })();
    </script>
</body>

</html>